import React from 'react';
import { ConfigProvider, Tabs as AntdTabs } from 'antd';
import type { TabsProps as AntdTabsProps } from 'antd';
import { useTabsStyles } from './style';
import { tabsThemeConfig } from '../../themes/tabs';

// 导出样式扩展 Hook，方便用户使用特殊效果
export { useTabsStyles } from './style';

export interface TabsProps extends AntdTabsProps {
  /**
   * @description 样式变体
   * @default 'default'
   */
  variant?: 'default' | 'card' | 'border' | 'filled';
}

const TabsComponent: React.FC<TabsProps> = ({ 
  variant = 'default',
  className,
  ...restProps 
}) => {
  const { styles, cx } = useTabsStyles();
  
  // 根据 variant 选择样式
  const variantStyleMap = {
    default: styles.customTabs,
    card: cx(styles.customTabs, styles.cardStyle),
    border: cx(styles.customTabs, styles.borderStyle),
    filled: cx(styles.customTabs, styles.filledStyle),
  };
  
  // 合并样式：基础样式 + 变体样式 + 用户样式
  const tabsClassName = cx(
    variantStyleMap[variant],
    className
  );

  return (
    <ConfigProvider
      theme={{
        components: {
          Tabs: tabsThemeConfig,
        },
      }}
    >
      <AntdTabs 
        className={tabsClassName} 
        {...restProps} 
      />
    </ConfigProvider>
  );
};

const Tabs = Object.assign(TabsComponent, {
  // 如果 AntdTabs 有静态属性，这里可以添加
});

export { Tabs };
export default Tabs;

